<template>
  <div class="head_line">
    <div class="avatar-part">
      <el-avatar size="large" :src="answer.avatar_url"></el-avatar>
      <div class="user-link">
        <router-link @mouseout="popUserCard=false" @mouseover="mouseOverUser" :to="`/app/user_info/${answer.user_id}/Answer`">
          {{answer.nickname}}
        </router-link>
        <div class="user-card-container" v-if="popUserCard">
          <UserInfoCard :userinfo="userInfo"></UserInfoCard>
        </div>
      </div>
    </div>
    <div class="time-part">编辑于{{" "+getDateFromTime(answer['create_time'])}}</div>
  </div>
  <div class="content_part">
    <div class="answer_content paragraph" v-html="answer['answer_content']">
    </div>
  </div>
  <AnswerOptionLine :answer="answer" :has-edit="true" @answer-edit="handleAnswerEdit">
  </AnswerOptionLine>
</template>

<script>
import {ref} from 'vue'
import {getQuestionAnswers} from "@/network/question";
import AnswerOptionLine from "@/components/AnswerOptionLine";
import WangEditor from "@/components/WangEditor";
import {getUser} from "@/network/user";
import UserInfoCard from "@/components/UserInfoCard";
export default {
  name: "AnswerCard",
  components: {UserInfoCard, WangEditor, AnswerOptionLine},
  props: {
    answer: {
      type: Object,
      default: {
        avatar_url: "",     // 回答问题的用户头像
        user_id: 0,         // 回答问题的用户id
        nickname: "nickname", // 回答问题的用户昵称
        create_time: "xxx-xxx-xxx xxx:xxx:xxx", // 创建时间
        modify_time: "xxx-xxx-xxx xxx:xxx:xxx", // 修改时间
        answer_content: "",    // 回答的内容
        // 以下部分传入AnswerWrapper
        answer_id: 0,     // 回答id
        thumb_up: 99,     // 点赞数
        comment_num: 99,  // 评论数
        collect_num: 99,  // 收藏数
        is_thumb_up: "0", // 是否已点赞
        is_collect: "0", // 是否已收藏
        byLoginUser: "0",// 是否由当前登录用户发布
      }
    }
  },
  emits: ['answerEdit'],
  setup(props, context) {
    const getDateFromTime = (timeStr)=> {
      if (timeStr) {
        return timeStr.split(" ")[0];
      }
      return "..."
    }

    const handleAnswerEdit = ()=> {
      // 继续向父节点传递
      context.emit("answerEdit", {
        answerId: props.answer.answer_id,
        answerContent: props.answer.answer_content
      });
    }

    const popUserCard = ref(false);
    const userInfo = ref(null);
    const mouseOverUser = ()=> {
      // 弹出用户的资料卡片
      if (userInfo.value === null) {
        getUser(props.answer.user_id).then(res=> {
          userInfo.value = res.data;
          popUserCard.value = true;
        })
      }
      else {
        popUserCard.value = true;
      }
    }

    return {
      getDateFromTime,
      handleAnswerEdit,
      mouseOverUser,
      popUserCard,
      userInfo,
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/common";

.head_line {
  padding: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .avatar-part {
    display: flex;
    flex-direction: row;
    align-items: center;

    .user-link {
      font-weight: bold;
      font-size: 20px;
      margin-left: 10px;
      // 用于定位
      position: relative;
      .user-card-container {
        position: absolute;
        z-index: 5;
        top: 60px;
      }
    }
  }
  .time-part {
    color: #8590a6;
    font-size: 14px;
  }
}
.content_part {
  .answer_content {
    margin: -15px 20px;

    overflow: hidden;
    border-radius: $main-radius;
    color: #121212;
    line-height: 1.67;
    text-align: justify;
  }

}
</style>
